<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {createExchange, deleteExchange, listExchange} from "../../../http/rabbitmq/exchange.js";
import {rabbitmqStore} from "../../../stores/counter.js";
import {listVhost} from "../../../http/rabbitmq/vhost.js";
import {
  bindingExchangeQueue
} from "../../../http/rabbitmq/binding.js";
import {listQueueByVhost} from "../../../http/rabbitmq/queue.js";
import {onBeforeRouteLeave} from "vue-router";

const exchangeName = ref("")
const vhostList = ref([])
const vhostQueueList = ref([])

const exchangeTableData = ref([])

const exchangeFormRef = ref(null)
const exchangeForm = ref({
  "vhost": "/",
  "type": "direct",
  "durable": "true",
  "auto_delete": "false",
  "internal": "false"
})

const exchangeFormRules = ref({
  name: [
    { required: true, trigger: 'blur' },
  ],
})

const exchangeQueueBindingForm = ref({
  "vhost": "",
  "source": "",
  "destination": "",
  "routing_key": "",
  "arguments": {},
})

const showExchangeForm = ref(false)
const showExchangeQueueBindingForm = ref(false)

function showExchangeCreate() {
  showExchangeForm.value = true
}

function handleExchangeSave() {
  exchangeFormRef.value.validate((valid) => {
    if (valid) {
      handleExchangeCreate()
    }
  })
}

function handleExchangeCreate() {
  createExchange(exchangeForm.value).then(response => {
    handleExchangeList()
    showExchangeForm.value = false
  })
  exchangeForm.value = {
    "vhost": "/",
    "type": "direct",
    "durable": "true",
    "auto_delete": "false",
    "internal": "false"
  }
}

function handleExchangeDelete(vhost, name) {
  deleteExchange(vhost, name).then(response => {
    handleExchangeList()
    showExchangeForm.value = false
  })
}

function handleExchangeList() {
  listExchange(exchangeName.value).then(response => {
    exchangeTableData.value = response.items
  })
}

function showExchangeQueueBinding(row) {
  exchangeQueueBindingForm.value = {
    "vhost": row.vhost,
    "source": row.name,
    "destination_type": "q",
    "destination": "",
    "routing_key": "",
    "arguments": {},
  }
  handleVhostQueueList(row.vhost)
  showExchangeQueueBindingForm.value = true
}

function handleBindingExchangeQueue() {
  bindingExchangeQueue(exchangeQueueBindingForm.value).then(response => {
    exchangeQueueBindingForm.value = {}
    showExchangeQueueBindingForm.value = false
  })
}

function handleVhostList() {
  listVhost().then(response => {
    vhostList.value = response
  })
}

function handleVhostQueueList(vhost) {
  listQueueByVhost(vhost).then(response => {
    vhostQueueList.value = response
  })
}

onMounted(() => {
  handleExchangeList()
  handleVhostList()
  rabbitmqStore().setTimer(handleExchangeList)
})

onUnmounted(() => {
  clearInterval(rabbitmqStore().timer)
  rabbitmqStore().deleteTimer()
})

onBeforeRouteLeave(() => {
  clearInterval(rabbitmqStore().timer)
  rabbitmqStore().deleteTimer()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input v-model="exchangeName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleExchangeList">Search</el-button>
          <el-button type="primary" @click="showExchangeCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="exchangeTableData" border style="width: calc(100% - 5px); height: calc(100% - 50px)">
      <el-table-column prop="vhost" label="vhost" min-width="80" width="80"/>
      <el-table-column prop="name" label="name" min-width="100">
        <template #default="scope">
          <router-link :to="{path:'/exchange-details', query: { name: scope.row.name, vhost: scope.row.vhost }}">{{ scope.row.name }}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="type" width="80"/>
      <el-table-column prop="durable" label="durable" width="80"/>
      <el-table-column prop="internal" label="internal" width="80"/>
      <el-table-column prop="auto_delete" label="auto_delete" width="110"/>
      <el-table-column prop="policy" label="policy" width="90" show-overflow-tooltip>
        <template #default="scope">
          <router-link v-if="scope.row.policy" :to="{path:'/policy-details', query: { name: scope.row.policy, vhost: scope.row.vhost }}"><el-tag type="primary">{{ scope.row.policy }}</el-tag></router-link>
        </template>
      </el-table-column>
      <el-table-column label="Message rates in" width="140">
        <template #default="scope">
          <span v-if="scope.row['message_stats'] !== undefined && scope.row.message_stats['publish_in_details'] !== undefined">
            {{ parseInt(scope.row.message_stats.publish_in_details.rate) }}/s
          </span>
        </template>
      </el-table-column>
      <el-table-column label="Message rates out" width="150">
        <template #default="scope">
          <span v-if="scope.row['message_stats'] !== undefined && scope.row.message_stats['publish_out_details'] !== undefined">
            {{ parseInt(scope.row.message_stats.publish_out_details.rate) }}/s
          </span>
        </template>
      </el-table-column>
      <el-table-column label="operations" width="100" fixed="right">
        <template #default="scope">
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleExchangeDelete(scope.row.vhost, scope.row.name)"
              :title="'是否删除Exchange [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="exchange manage" v-model="showExchangeForm" :close-on-click-modal="false" label-width="160px">
    <el-form ref="exchangeFormRef" :model="exchangeForm" :rules="exchangeFormRules" label-width="160px">
      <el-form-item label="Virtual host">
        <el-select v-model="exchangeForm.vhost">
          <el-option
              v-for="item in vhostList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="name" :rules="{
        required: true,
        message: 'domain can not be null',
        trigger: 'blur',
      }">
        <el-input v-model="exchangeForm.name"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="exchangeForm.type">
          <el-option
              v-for="item in rabbitmqStore().exchangeType"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否持久化">
        <el-select v-model="exchangeForm.durable">
          <el-option
              v-for="item in rabbitmqStore().durable"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否自动删除">
        <el-select v-model="exchangeForm.auto_delete">
          <el-option
              v-for="item in rabbitmqStore().auto_delete"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否为内部类型">
        <el-select v-model="exchangeForm.internal">
          <el-option
              v-for="item in rabbitmqStore().internal"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleExchangeSave">Save</el-button>
        <el-button @click="showExchangeForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog title="exchange manage" v-model="showExchangeQueueBindingForm" :close-on-click-modal="false"
             label-width="160px">
    <el-form ref="form" :model="exchangeQueueBindingForm" label-width="160px">
      <el-form-item label="队列">
        <el-select v-model="exchangeQueueBindingForm.destination">
          <el-option
              v-for="item in vhostQueueList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="routing_key">
        <el-input v-model="exchangeForm.routing_key"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleBindingExchangeQueue">Save</el-button>
        <el-button @click="showExchangeQueueBindingForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>

</style>